<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>ContainerScroller (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
  </script>

  <script src="static/js/doc.js">
  </script>

  <meta charset="utf8">
</head>

<body onload="prettyPrint()">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
        <span class="fn">ui.ContainerScroller</span>
        <span>Extends</span>
        <span class="fn-name">
          <a href="class_goog_Disposable.html">
            goog.Disposable</a>
        </span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    Plug-on scrolling behavior for a container.

Use this to style containers, such as pop-up menus, to be scrolling, and
automatically keep the highlighted element visible.

To use this, first style your container with the desired overflow
properties and height to achieve vertical scrolling.  Also, the scrolling
div should have no vertical padding, for two reasons: it is difficult to
compensate for, and is generally not what you want due to the strange way
CSS handles padding on the scrolling dimension.

The container must already be rendered before this may be constructed.
  </div>


        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="closure_goog_ui_containerscroller.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
          </ol>
        </div>
</div>






<h2 class="g-first">Inheritance</h2>
<pre class="inheritance">
Object
     <img src="static/images/inherit.gif"><span class="type"><a href="class_goog_Disposable.html">goog.Disposable</a></span>
          <img src="static/images/inherit.gif">goog.ui.ContainerScroller
</pre>




  <h2>Constructor</h2>
      <div class="fn-constructor">
    goog.ui.ContainerScroller(<span><span class="arg">container</span></span>)
  </div>

   <h3>Parameters</h3>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">container</span>
        : <div class="fullType"><span>!</span><span class="type"><a href="class_goog_ui_Container.html">goog.ui.Container</a></span></div>
        <div class="entryOverview">The container to attach behavior to.</div>
     </td>
   </tr>
  </table>


<h2>Instance Methods</h2>


  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>







<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_ui_ContainerScroller.html">
              goog.ui.ContainerScroller
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.disposeInternal"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">disposeInternal<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line213">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.doScrolling_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">doScrolling_<span class="args">(<span class="arg">opt_center</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Centers the currently highlighted item, if this is scrollable.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">opt_center</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
        <div class="entryOverview">Whether to center the highlighted element rather than simply ensure it is in view.  Useful for the first render.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line184">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.onAfterShow_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">onAfterShow_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Handles AFTER_SHOW events on the container. Makes the container
scroll to the previously scrolled position (if there was one),
then adjust it to make the highlighted element be in view (if there is one).
If there was no previous scroll position, then center the highlighted
element (if there is one).
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_Event.html">goog.events.Event</a></span></div>
        <div class="entryOverview">The container&#39;s AFTER_SHOW event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line152">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.onEnter_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">onEnter_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Handles hover events on the container&#39;s children.

Helps enforce two constraints: scrolling should not cause mouse highlights,
and mouse highlights should not cause scrolling.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_Event.html">goog.events.Event</a></span></div>
        <div class="entryOverview">The container&#39;s ENTER event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line119">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.onHide_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">onHide_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Handles hide events on the container. Clears out the last enter target,
since it is no longer applicable, and remembers the scroll position of
the menu so that it can be restored when the menu is reopened.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_Event.html">goog.events.Event</a></span></div>
        <div class="entryOverview">The container&#39;s hide event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line171">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.onHighlight_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">onHighlight_<span class="args">(<span class="arg">e</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Handles highlight events on the container&#39;s children.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <div class="fullType"><span class="type"><a href="class_goog_events_Event.html">goog.events.Event</a></span></div>
        <div class="entryOverview">The container&#39;s highlight event.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line138">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.ContainerScroller.prototype.temporarilyDisableHover_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">temporarilyDisableHover_<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       Temporarily disables hover events from changing highlight.
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line204">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>

<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_Disposable.html">
              goog.Disposable
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.Disposable.prototype.dispose"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">dispose<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_disposable_disposable.js.source.html#line64">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry protected">
       <td class="access"></td>






  <td>
    <a name="goog.Disposable.prototype.disposeInternal"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">disposeInternal<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       Deletes or nulls out any references to COM objects, DOM nodes, or other
disposable objects. Classes that extend {@code goog.Disposable} should
override this method.  For example:
<pre class="lang-js">
mypackage.MyClass = function() {
goog.Disposable.call(this);
// Constructor logic specific to MyClass.
...
};
goog.inherits(mypackage.MyClass, goog.Disposable);

mypackage.MyClass.prototype.disposeInternal = function() {
mypackage.MyClass.superClass_.disposeInternal.call(this);
// Dispose logic specific to MyClass.
...
};
</pre>
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_disposable_disposable.js.source.html#line94">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.Disposable.prototype.getDisposed"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">getDisposed<span class="args">()</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>


    <! -- Method details -->
    <div class="entryDetails">

   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>&nbsp;
            Whether the object has been disposed of.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_disposable_disposable.js.source.html#line55">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.Disposable.prototype.isDisposed"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryName">isDisposed<span class="args">()</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>


    <! -- Method details -->
    <div class="entryDetails">

   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>&nbsp;
            Whether the object has been disposed of.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_disposable_disposable.js.source.html#line46">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>




<h2>Instance Properties</h2>







<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_ui_ContainerScroller.html">
              goog.ui.ContainerScroller
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.ui.ContainerScroller.prototype.disableHover_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">disableHover_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
     </div>


     <div class="entryOverview">
       Whether we are disabling the default handler for hovering.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line107">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.ui.ContainerScroller.prototype.lastEnterTarget_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">lastEnterTarget_</span>
        : <div class="fullType"><span class="type"><a href="class_goog_ui_Component.html">goog.ui.Component</a></span></div>
     </div>


     <div class="entryOverview">
       The last target the user hovered over.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line87">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.ui.ContainerScroller.prototype.scrollTopBeforeHide_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">scrollTopBeforeHide_</span>
        : <div class="fullType"><span>?</span><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       The scrollTop of the container before it was hidden.
Used to restore the scroll position when the container is shown again.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_containerscroller.js.source.html#line96">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>

<div>
       <div class="desc">
         Defined in
         <span class="fn-name">
            <a href="class_goog_Disposable.html">
              goog.Disposable
            </a>
         </span>
       </div>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.Disposable.prototype.disposed_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">disposed_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span></div>
     </div>


     <div class="entryOverview">
       Whether the object has been disposed of.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_disposable_disposable.js.source.html#line40">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
</div>










<div class="section">
  <table class="horiz-rule">


  </table>
</div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>
      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Package ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">Package Reference</h2>
            <div id="sideTypeIndex" rootPath="goog" current="ui.ContainerScroller"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
